<template>
  <v-menu
    ref="vMenu"
    v-model="menu"
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    min-width="auto"
  >
    <template v-slot:activator="{ on, attrs }">
      <v-text-field
        v-model="date"
        label="生日"
        append-icon="mdi-calendar"
        readonly
        v-bind="attrs"
        v-on="on"
      ></v-text-field>
    </template>
    <v-date-picker
      ref="vPicker"
      v-model="date"
      :max="new Date().toISOString().substr(0, 10)"
      min="1900-01-01"
      @change="save"
      locale="zh-cn"
    ></v-date-picker>
  </v-menu>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { StringOrNull } from "@/Types/Types";
import { VMenuClass, VDatePickerClass } from "@/shims-vuetify";

@Component
export default class BirthdayDataPiker extends Vue {
  // @ts-ignore
  @Prop({ default: null }) value: StringOrNull;

  menu = false;

  date: StringOrNull = null;

  $refs!: {
    vMenu: VMenuClass;
    vPicker: VDatePickerClass;
  };

  save(val: string) {
    this.$refs.vMenu.save(val);
    this.$emit("input", val);
  }

  @Watch("menu", { immediate: true })
  onMenuChange(val) {
    val && setTimeout(() => (this.$refs.vPicker.activePicker = "YEAR"));
  }

  @Watch("value", { immediate: true })
  onValueChange() {
    this.date = this.value;
  }

  created() {
    this.date = this.value;
  }
}
</script>

<style scoped></style>
